<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Navigation</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .container {
            display: flex;
            width: 100%;
        }

        .nav {
            width: 200px;
            background-color: #fff;
            color: #333;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            padding-top: 20px;
            border-right: 1px solid #ddd;
        }

        .profile {
            text-align: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .profile img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .profile p {
            margin: 10px 0 0;
            font-size: 18px;
        }

        .nav_lineprinter {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav_lineprinter li {
            width: 100%;
        }

        .nav_lineprinter li a {
            display: block;
            padding: 15px;
            color: #333;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        .nav_lineprinter li a:hover{
            color: #000000;
            font-weight: bold;
        }
        .nav_lineprinter li.active a {
            background-color: #009688;
            color: #fff;
        }

        .center {
            margin-left: 220px;
            padding: 20px;
            width: calc(100% - 220px);
        }

        iframe {
            width: 100%;
            height: 1000px;
            border: 0;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <div class="nav">
        <div class="profile">
            <img  id="profile-pic" src="../icon/管理员.png" alt="Profile Picture">
            <p id="welcomeMessage">欢迎你,管理员 </p>
        </div>
        <ul class="nav_lineprinter">
            <li class="active"><a href="javascript:;">新房订单管理</a></li>
            <li><a href="javascript:;">二手订单管理</a></li>
            <li><a href="javascript:;">出租订单管理</a></li>
            <li><a href="javascript:;">添加房源</a></li>
            <li><a href="javascript:;">账号管理</a></li>


            <li><a href="../index.html" onclick="logout()">注销</a></li>
        </ul>
    </div>
    <!-- 各导航栏详细信息 ----- 默认引入首页-->
    <div class="center">
        <div id="products">
            <iframe src="new_house_management.html"></iframe>
        </div>
    </div>
</div>

<script>
    // 获取 localStorage 中的 avatar 项
    var adminName = localStorage.getItem("adminName");


    document.addEventListener("DOMContentLoaded", function() {




            document.getElementById('welcomeMessage').textContent = '欢迎你,管理员 ' + adminName;


        // 导航栏点击时颜色以及页面的切换
        var navItems = document.querySelectorAll(".nav_lineprinter > li");
        var productsFrame = document.getElementById("products").children[0];
        var navs = ["new_house_management.html", "second_hand_management.html", "rental_nanagement.html", "AddProperty.html", "Account_management.html"];

        navItems.forEach(function(navItem, index) {
            navItem.addEventListener("click", function() {
                // 排他思想 -> 颜色变化
                navItems.forEach(function(item) {
                    item.classList.remove("active");
                });

                navItem.classList.add("active");

                // 切换页面
                productsFrame.setAttribute("src", navs[index]);
            });
        });
    });
    function logout() {
        localStorage.removeItem('adminToken');
        localStorage.removeItem('adminId');
        localStorage.removeItem('adminName');
    }
</script>
</body>
</html>
